<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>植物分类查询</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../css/layui.css">
    <link rel="stylesheet" href="../css/global.css">
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
    <style>
        .lnk_nav {
            position: absolute !important;
        }
    </style>
</head>
<body id="mar_body">

<div class="headers" id="headers">
    <div class="container demo-1">
        <div id="large-header" class="large-header">
            <canvas id="demo-canvas"></canvas>
            <h1 class="main-title">菌类信息库<br/> <br/>
                <small style="font-size: 16px;">菌类信息库已收录2112种菌类</small>
            </h1>
        </div>
    </div><!-- /container -->
</div>

<div class="main">
    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>

    <div class="fly-panel fly-panel-user" pad20>
    <div class="layui-tab layui-tab-brief" lay-filter="user" id="LAY_msg" style="margin-top: 15px;">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">高级检索 </h2>
                    <div class="layui-colla-content layui-show layui-form">
                        <div class="layui-inline">
                        <label class="layui-form-label">类别</label>
                        <div class="layui-input-block">
                            <select name="leimu" lay-filter="leimu">
                                <option value="5" selected="">俗名</option>
                                <option value="1">纲</option>
                                <option value="2">目</option>
                                <option value="3">科</option>
                                <option value="4">属</option>
                            </select>
                        </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-block">
                                <input type="text" name="name" required lay-verify="required" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-normal do-submit" lay-submit lay-filter="*" >开始搜索</button>
                        </div>


                    </div>
                </div>

            </div>
        </div>
        <table class="layui-hide" id="list">

        </table>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        </script>
    </div>
</div>

<script src="../js/jquery-2.0.3.min.js"></script>
<script src="../js/TweenLite.min.js"></script>
<script src="../js/EasePack.min.js"></script>
<script src="../js/rAF.js"></script>
<script src="../js/demo-1.js"></script>

<script src="../layui.js"></script>
<script type="text/html" id="titleTpl">
    <img src="{{d.picture}}" style="height: 100px">
</script>


<script>
    layui.use(['table', 'form'], function () {
        var table = layui.table,
            form = layui.form;

        var tableIns = table.render({
            elem: '#list'
            , url: "/api/botany"
            ,response: {
                dataName: 'data' //数据列表的字段名称，默认：data
            }
            , cols: [[
                {field: 'picture', width: '10%', title: '图片', templet: '#titleTpl'},
                {field: 'name', width: '16%', title: '名称'}
                , {field: 'gang', width: '10%', title: '纲'}
                , {field: 'mu', width: '10%', title: '目'}
                , {field: 'ke', width: '10%', title: '科'}
                , {field: 'shu', width: '10%', title: '属'}
                , {field: 'description', width: '30%', title: '描述'}
                , {field: 'user', width: '15%', title: '记录人'}
            ]]
            , page: true

        });

        var $ = layui.$, active = {
            reload: function () {
                //执行重载
                tableIns.reload({
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {

                        title: $('.title').val(),
                        number: $('.wenhao').val(),
                        year: $('.year').val(),
                        danwei: $('.danwei').val(),
                        start_time: $('.start_time').val(),
                        end_time: $('.end_time').val()

                    }
                });
            }
        };
        form.on('submit(*)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            layui.use('table', function () {
                var table = layui.table;
                table.render({
                    elem: '#list'
                    , url: "/api/botany?leimu="+data.field.leimu+"&name="+data.field.name
                    , cols: [[
                        {field: 'picture', width: '10%', title: '图片',templet: '#titleTpl'},
                        {field: 'name', width: '16%', title: '名称'}
                        , {field: 'gang', width: '10%', title: '纲'}
                        , {field: 'mu', width: '10%', title: '目'}
                        , {field: 'ke', width: '10%', title: '科'}
                        , {field: 'shu', width: '10%', title: '属'}
                        , {field: 'description', width: '30%', title: '描述'}
                        , {field: 'user', width: '15%', title: '记录人'}
                    ]]
                    , page: true

                });
                layer.closeAll('loading');

            });

        });

    });
</script>

</body>
</html>